import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
import { App } from 'vue'

export default {
  install(app: App) {
    app.directive('lazy', {
      mounted(el, binding) {
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            el.src = binding.value
            el.onerror = function () {
              this.src = defaultImg
            }
            stop()
          }
        })
      },
    })
  },
}
/* import {useIntersectionObserver} from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
import {App} from 'vue'
export default{
  install(app:App){
    app.directive('lazy',{
      mounted(el,binding){
        const{stop}=useIntersectionObserver(el,([{isIntersecting}])=>{
          if(isIntersecting){
            el.src=binding.value
            el.onerror=function (){
              this.src=defaultImg
            }
            stop()
          }
        })
      }
    })
  }
} */